<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:t="http://myfaces.apache.org/tomahawk">
	
<p:dialog header="Cadastrar veículo" widgetVar="dlgVeiculo" modal="true"
	height="550" width="750" resizable="false">
	
	<h:form id="veiculoModalForm">
	
	<script type="text/javascript">
	
		jQuery(function(){
			
			jQuery('table[id*=acessorios] > tbody > tr > td > label').css("font-weight", "normal");
			
			jQuery('input[id*=anoFab]').numbers();
			jQuery('input[id*=anoMod]').numbers();
			
			jQuery('input[id*=portas]').numbers();
			jQuery('input[id*=potencia]').numbers();
			jQuery('input[id*=cilindrada]').numbers();
			
		});
		
	</script>
	
	<p:panel id="panelVeiculoModal" style="height:455px; overflow:auto;">

		<table cellspacing="10" width="100%">
			<tr>
				<td colspan="3">
					<h:outputLabel for="placa" value="* Placa:" />
					<br />
					<p:inputMask id="placa" mask="aaa9999"
						value="#{manterVeiculosBean.veiculo.nrPlaca}"
						label="Placa" style="width:65px;" >
					</p:inputMask>
	            </td>
			</tr>
			<tr>
				<td width="250px;">
					<h:outputLabel for="fabricante" value="* Fabricante:" />
					<br />
					<h:selectOneMenu id="fabricante" label="Fabricante" style="width:160px;"
						styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
						value="#{manterVeiculosBean.veiculo.fabricante.id}" >
					    <f:selectItems value="#{manterVeiculosBean.todosFabricantes}" var="fab"
					    	itemValue="#{fab.value}" itemLabel="#{fab.label}"/>
				    	<f:ajax event="change" render="modelo" />
					</h:selectOneMenu>
	            </td>
				<td width="250px;">
					<h:outputLabel for="modelo" value="* Modelo:" />
					<br />
					<h:selectOneMenu id="modelo" style="width:160px;" label="Modelo"
						styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
							value="#{manterVeiculosBean.veiculo.modelo.id}">
						    <f:selectItems value="#{manterVeiculosBean.modelosPorFabricante}" var="modelo"
						    	itemValue="#{modelo.value}" itemLabel="#{modelo.label}"/>
					</h:selectOneMenu>
	            </td>
			</tr>
			<tr>
				<td>
					<h:outputLabel for="chassi" value="Chassi:" />
					<br />
					<p:inputText id="chassi" maxlength="17"
						value="#{manterVeiculosBean.veiculo.chassi}" label="Chassi" />
	            </td>
				<td>
					<h:outputLabel for="renavam" value="Renavam:" />
					<br />
					<p:inputText id="renavam" maxlength="9"
						value="#{manterVeiculosBean.veiculo.renavam}" label="Renavam" />
	            </td>
	            <td>
					<h:outputLabel for="uf" value="Estado:" />
					<br />
					<h:selectOneMenu id="uf" style="width:160px;" label="Estado"
						styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
							value="#{manterVeiculosBean.veiculo.uf}">
						    <f:selectItems value="#{manterVeiculosBean.todasUfs}" var="uf"
						    	itemValue="#{uf.value}" itemLabel="#{uf.label}"/>
					</h:selectOneMenu>
	            </td>
			</tr>
			<tr>
				<td width="250px;">
					<h:outputLabel for="combustivel" value="Combustível:" />
					<br />
					<h:selectOneMenu id="combustivel" label="Combustível" style="width:160px;"
						styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
						value="#{manterVeiculosBean.veiculo.combustivel.id}" >
					    <f:selectItems value="#{manterVeiculosBean.todosCombustiveis}" var="comb"
					    	itemValue="#{comb.value}" itemLabel="#{comb.label}"/>
					</h:selectOneMenu>
	            </td>
				<td width="250px;">
					<h:outputLabel for="cambio" value="Cambio:" />
					<br />
					<h:selectOneMenu id="cambio" style="width:160px;" label="Cambio"
						styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
							value="#{manterVeiculosBean.veiculo.cambio.id}">
						    <f:selectItems value="#{manterVeiculosBean.todosCambios}" var="cambio"
						    	itemValue="#{cambio.value}" itemLabel="#{cambio.label}"/>
					</h:selectOneMenu>
	            </td>
			</tr>
			<tr>
				<td>
					<h:outputLabel for="anoFab" value="Ano de fabricação:" />
					<br />
					<p:inputText id="anoFab" maxlength="4"
						value="#{manterVeiculosBean.veiculo.anoFabricacao}"
						label="Ano de fabricação" style="width:45px;" >
					</p:inputText>
	            </td>
				<td>
					<h:outputLabel for="anoMod" value="Ano do modelo:" />
					<br />
					<p:inputText id="anoMod" maxlength="4"
						value="#{manterVeiculosBean.veiculo.anoModelo}"
						label="Ano do modelo" style="width:45px;" >
					</p:inputText>
	            </td>
			</tr>
			<tr>
				<td>
					<h:outputLabel for="cor" value="Cor:" />
					<br />
					<p:inputText id="cor" maxlength="20"
						value="#{manterVeiculosBean.veiculo.cor}" label="Cor" />
	            </td>
				<td>
					<h:outputLabel for="portas" value="Portas:" />
					<br />
					<p:inputText id="portas" style="width:45px;" maxlength="1"
						value="#{manterVeiculosBean.veiculo.portas}" label="Portas" />
	            </td>
			</tr>
			<tr>
				<td>
					<h:outputLabel for="potencia" value="Potência (CV):" />
					<br />
					<p:inputText id="potencia" style="width:45px;" maxlength="4"
						value="#{manterVeiculosBean.veiculo.potencia}" label="Potência" />
	            </td>
				<td>
					<h:outputLabel for="cilindrada" value="Cilindrada:" />
					<br />
					<p:inputText id="cilindrada" style="width:45px;" maxlength="4"
						value="#{manterVeiculosBean.veiculo.cilindrada}" label="Cilindrada" />
	            </td>
			</tr>
			<tr>
				<td colspan="3">
					<br />
					<p:separator style="height:3px" />  
					<br />
	            </td>
			</tr>
			<tr>
				<td colspan="3">
					<h:outputLabel for="acessorios" value="Acessórios:" />
					<br />
					<t:selectManyCheckbox id="acessorios" layout="pageDirection" layoutWidth="3"
						value="#{manterVeiculosBean.veiculo.acessoriosAux}"
						 selectedClass="checkbox-itens">
						<f:selectItems value="#{manterVeiculosBean.todosAcessorios}" var="acessorio"
							itemLabel="#{acessorio.nmAcessorio}" itemValue="#{acessorio.id}" />
					</t:selectManyCheckbox>
	            </td>
			</tr>
			<tr>
				<td colspan="3">
					<br />
					<h:outputLabel for="observacao" value="Observações:" />
					<br />
					<p:inputTextarea id="observacao" 
						value="#{manterVeiculosBean.veiculo.observacao}"
						label="Observações" style="width:620px;height:80px;" />
	            </td>
			</tr>
		</table>
			
		</p:panel>
		
		<br />
		<div align="right">
			<p:commandButton id="botaoIncluir" value="Incluir"
				update="msgSistema, veiculoModalForm, entradaVeicForm, lancamentoForm" 
				oncomplete="handleRetornoRequestVeiculo(xhr, status, args)"
				actionListener="#{manterVeiculosBean.incluirVeiculoModal}" 
				style="margin-left:5px;" />
			<p:commandButton value="Cancelar" onclick="dlgVeiculo.hide();"
				type="button" style="margin-left:5px;" />
		</div>

		</h:form>
	</p:dialog>
	
	<script type="text/javascript">
		function handleRetornoRequestVeiculo(xhr, status, args) {
			if(!args.falhou) {
				dlgVeiculo.hide();
			}
		}
	</script>

</html>